<template>
    <div>
        <!-- banner -->
        <div class="banner ban">
            <h1 class="banner-title">{{ title }}</h1>
        </div>

        <!-- 相册列表 -->

        <v-card class="blog-container">
            <div><a @click="open"> <i class="el-icon-plus" style="color: forestgreen"></i></a></div>

            <v-row>
                <v-col :md="6" v-for="(item,index) of photoList" :key="item.id">
                    <div class="album-item">
                        <img class="photo " :src="item.albums" @click="preview(index)"
                             @mouseover="mouseOver(item.id)"
                        />


                        <div @mouseover="mouseOver(item.id)">
                            <div style="display: flex">
                                <div class="album-desc"><a @click="delete1(item.id)" style="color: red;"><i
                                        class="el-icon-delete" v-show="shows && item.op !== 0"
                                        style="float: left;font-weight: bold"></i></a>
                                </div>
                                <div class="album-desc" style="margin-left: 150px;color: #53aaeb">{{item.intro}}</div>


                                <div class="album-desc"><a @click="updateAblum(item)"
                                                           style="margin-left: 10%;color: skyblue;"><i
                                        class="el-icon-edit" v-show="shows" style="font-weight: bold"></i></a></div>
                            </div>
                        </div>

                    </div>
                </v-col>
            </v-row>
        </v-card>

        <el-dialog
                title="上传照片"
                :visible.sync="dialogVis"
                width="40%"

        >
            <el-form :model="forms">
                <el-form-item label="照片介绍">
                    <el-input v-model="forms.intro" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="链接">
                    <el-input v-model="forms.albums" @blur="aaa" style="width: 80%" :disabled="flages"></el-input>
                </el-form-item>
                <el-form-item label="照片">
                    <el-upload :disabled="flags"
                               ref="upload"
                               :action="'/blog/files/upload'"
                               :on-success="filesUploadSuccess1"
                    >
                        <el-button size="small" :disabled="flags" type="primary">点击上传</el-button>

                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancel ">取 消</el-button>
    <el-button type="primary" @click="addAblum">确 定</el-button>
  </span>
        </el-dialog>

        <!--更新照片-->
        <el-dialog
                title="更新照片"
                :visible.sync="dialogVis1"
                width="40%"

        >
            <el-form :model="forms1">
                <el-form-item label="照片介绍">
                    <el-input v-model="forms1.intro" style="width: 80%"></el-input>
                </el-form-item>

                <el-form-item label="链接">
                    <el-input v-model="forms1.albums" style="width: 80%"></el-input>
                </el-form-item>

                <el-form-item label="照片">
                    <el-upload

                            ref="upload"
                            :action="'blog/files/upload'"
                            :on-success="filesUploadSuccess12"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>

                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVis1 = false">取 消</el-button>
    <el-button type="primary" @click="updateAblums">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    import request from '../../utils/request'
    import {serverIp} from "../../utils/config";
    export default {
        data() {
            return {
                serverIp:serverIp,
                flages: false,
                dialogVis1: false,
                forms1: {},
                forms: {},
                dialogVis: false,
                shows: false,
                photoAlbumName: "",
                photoAlbumCover: "",
                photoList: [],
                photoListSrc: [],
                title: '',
                current: 1,
                size: 10,
                flags: false
            };
        },
        created() {
            let str = sessionStorage.getItem("user")
            this.form = JSON.parse(str)
            this.list()
        },
        methods: {

            list() {
                let category = this.$route.query
                this.title = category.id
                request.get("/album/query/categoryList/" + this.form.username + "/" + category.id).then(res => {
                    this.photoList = res.data
                    for (let i = 0; i < res.data.length; i++) {
                        this.photoListSrc.push(res.data[i].albums);
                    }
                });
            },
            //取消
            cancel() {
                this.dialogVis = false
                this.forms = {}
            },
            //监听事件
            aaa() {
                if (this.forms.albums != '') {
                    this.flags = true
                } else {
                    this.flages = true
                }

            },
            updateAblums() {
                request.put("/album/updateAblum", this.forms1).then(res => {
                    if (res.code === 20000) {
                        this.$toast({
                            type: 'success',
                            message: '更新成功'
                        })
                        this.dialogVis1 = false
                        // this.$router.go(0);
                        this.list()
                    } else {
                        this.$toast({
                            type: 'error',
                            message: res.msg
                        })
                    }
                })
            },
            updateAblum(id) {

                this.dialogVis1 = true
                this.forms1 = id
            },
            addAblum() {

                let category = this.$route.query

                this.forms.category = category.id
                this.forms.name = this.form.username
                // 区分上传页面： 属于新增相册 1 表示新增相册
                this.forms.op = 1
                request.post('/album/addAblum', this.forms).then(res => {

                    if (res.code === 20000) {
                        this.$toast({
                            type: 'success',
                            message: '添加成功'
                        })
                        // this.$router.go(0);
                        this.dialogVis = false
                        this.list()
                    } else {
                        this.$toast({
                            type: 'error',
                            message: res.msg
                        })
                    }
                })
            },
            //打开弹窗
            open() {

                this.dialogVis = true
            },
            delete1(id) {

                this.$confirm('你确定要删除此照片,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.delete('/album/deleteAblum/photo/' + id).then(res => {
                        if (res.code === 20000) {
                            this.$toast({
                                type: 'success',
                                message: '删除成功'
                            })
                            // this.$router.go(0);
                            this.list()
                        } else {
                            this.$toast({
                                type: 'error',
                                message: res.msg
                            })
                        }
                    })
                }).catch(() => {
                    this.$toast({type: 'success', message: '已取消删除'})
                })


            },
            //文件上传
            filesUploadSuccess1(res) {

                this.forms.albums = res.data
            },
            filesUploadSuccess12(res) {

                this.forms1.albums = res.data
            },
            mouseLeave() {

                this.shows = false
            },

            mouseOver(id) {
                console.log(id)
                this.shows = true
            },
            preview(index) {
                this.$imagePreview({
                    images: this.photoListSrc,
                    index: index
                });
            },

        },
        computed: {
            cover() {
                return (
                    "background: url(" +
                    this.photoAlbumCover +
                    ") center center / cover no-repeat"
                );
            }
        }
    };
</script>

<style scoped>
    .ban {
        background: url(https://static.talkxj.com/config/83be0017d7f1a29441e33083e7706936.jpg) center center / cover no-repeat;
        background-color: #49b1f5;
    }

    .album-item:hover .album-desc {
        opacity: 1;
        filter: none;
        transform: translate3d(0, 0, 0);
    }

    .album-desc {
        margin: 0;
        padding: 0.4rem 0 0;
        line-height: 1.5;
        opacity: 0;
        transition: opacity 0.9s, transform 1s;
        transform: translate3d(100%, 0, 0);
    }

    .photo {
        margin: 3px;
        cursor: pointer;
        flex-grow: 1;
        object-fit: cover;
        height: 200px;
    }

    .photo-wrap::after {
        content: "";
        display: block;
        flex-grow: 9999;
    }

    @media (max-width: 759px) {
        .photo {
            width: 100%;
        }
    }

    .album-item {
        overflow: hidden;
        position: relative;
        cursor: pointer;
        background: #fff;
        border-radius: 0.5rem !important;
    }

    .album-item:hover .album-cover {
        transform: translate3d(0, 0, 0);
        opacity: 0.4;
    }

    .album-item:hover .album-name:after {
        transform: translate3d(0, 0, 0);
    }

    .album-item:hover .album-desc {
        opacity: 1;
        filter: none;
        transform: translate3d(0, 0, 0);
    }

    .album-name {
        font-weight: bold;
        font-size: 1.25rem;
        overflow: hidden;
        padding: 0.7rem 0;
        position: relative;
    }

    .album-name:after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        content: "";
        transition: transform 0.35s;
        transform: translate3d(-101%, 0, 0);
    }


</style>
